<template>
  <div class="hk-index">
    <van-search
      v-model="value"
      placeholder=" 请输入小区或地址"
      left-icon="search"
      show-action
    >
      <template #label>
        <router-link to="./hk-dizhi">{{city1}}▼</router-link> |</template
      >
      <template #action><van-icon class="tubiao" name="location-o" @click="$router.push('./hk-ditu')" /></template>
    </van-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in arr" :key="item.id">
        <img :src="'http://liufusong.top:8080' + item.imgSrc" alt=""
      /></van-swipe-item>
    </van-swipe>
    <van-grid :border="false">
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item icon="map-marked" text="地图找房" />
      <van-grid-item icon="shop-o" text="去出租" />
    </van-grid>
    <div>
      <br />

      <span class="left1">租房小组 </span>
      <a href="#" class="right1">更多</a>

      <br />
      <br />
      <div v-for="item in arr1" :key="item.id">
        <van-card
          :desc="item.desc"
          :title="item.title"
          :thumb="'http://liufusong.top:8080' + item.imgSrc"
        />
      </div>
    </div>

    <div class="liubai"></div>
    <router-view></router-view>
  </div>
</template>

<script>
import { register, register1 } from '@/api/user'

export default {
  name: 'hk-index',
  components: {},
  props: {},
  data() {
    return {
      city1: JSON.parse(localStorage.getItem('city')).label || '北京',
      value: '',
      arr: [],
      arr1: []
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await register()

    this.arr = res.body

    const res1 = await register1()
    this.arr1 = res1.body
  },
  methods: {}
}
</script>

<style scoped lang="less">
.hk-index {
  background: #f5f5f5;
  height: 100vh;
}
.tubiao {
  font-size: 25px;
  margin-top: 5px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
::v-deep .van-search--show-action {
  position: fixed;
  left: 5px;
  top: 10px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0) !important;
  width: 100%;
}
img {
  width: 100%;
  height: 100%;
}
::v-deep .van-hairline--top {
  height: 200px !important;
}

.left1 {
  font-size: 16px;
  color: #000;
  margin-left: 15px;
}
.right1 {
  float: right;
  color: grey;
  margin-right: 10px;
}
::v-deep .van-grid-item__icon {
  color: #0eb26e;
}
::v-deep .van-card {
  height: 60px;
  width: 45%;
  float: left;
  margin-left: 3% !important;
  margin-bottom: 10px;
  background-color: #fff;
}
::v-deep .van-grid {
  height: 125px;
}
::v-deep .van-grid-item__icon {
  background-color: #f2fbf7;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border-radius: 30px;
}
::v-deep .van-image__error {
  height: 40%;
  width: 40%;
  margin-top: 10px;
}
::v-deep .van-card__thumb {
  height: 30px;
  width: 30px;
}
.liubai {
  background-color: #fff;
  width: 100%;
  height: 110px;
  float: left;
}
</style>
